<!-- 平台---供应商销量统计页面 -->
<template>
  <div class="app-container">
    <PageSearch
      :showSearch.sync="showSearch"
      :getList="getList"
      :handleQuery="handleQuery"
      :resetQuery="resetQuery">
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small" inline>
          <el-row>
            <el-form-item :label="$t('时间选择')">
              <el-date-picker
                v-model="queryParams.time"
                type="daterange"
                @change="getList"
                :clearable="false"
                value-format="yyyy-MM-dd" />
            </el-form-item>
            <el-form-item :label="$t('供应商')" prop="distrName">
              <el-input @keyup.enter.native="handleQuery" clearable v-model="queryParams.distrName" />
            </el-form-item>
            <el-form-item :label="$t('sku编号')" prop="skuNo">
              <el-input @keyup.enter.native="handleQuery" clearable v-model="queryParams.skuNo" />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </template>
    </PageSearch>

    <el-table
    :height="showSearch ? calTableHeight() - 50 : calTableHeight()"
     v-loading="loading" ref="TableRef" :data="tableData" row-key="menuId">
      <!-- 供应商 sku 销量 sku营业额 （各价格数量累加） 销量趋势（sku营业额） -->
      <el-table-column align="center" show-overflow-tooltip prop="distrName" :label="$t('供应商')" />
      <el-table-column align="center" show-overflow-tooltip prop="skuNo" label="sku" />
      <el-table-column :label="$t('图片')" prop="imgUrl" align="center">
        <template slot-scope="scope" >
          <div class="goods-img-box">
            <el-image
              class="goods-img-mini"
              @mouseenter="mouseenterleave(scope.row.imgUrl, true)"
              @mouseleave="mouseenterleave(scope.row.imgUrl, false)"
              :src="scope.row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'" />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="saleNum" label="销量" />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="salePrice"
        label="sku营业额（各价格数量累加）" />
      <el-table-column align="center" label="销量趋势（sku营业额）" width="250">
        <template slot-scope="{ row }">
          <div :id="'main' + row.skuId" style="width: 250px; height: 60px"></div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 图片 -->
    <el-image
      class="bigImg"
      v-show="showImage"
      @mouseenter="mouseenterleave('img', true)"
      @mouseleave="mouseenterleave('img', false)"
      :src="showUrl" />
  </div>
</template>

<script>
import { getSalesVolumeListByPlatformDistributor } from '@/api/statistics/supplierSalePlatform'
import * as echarts from 'echarts'
import useStaticsConfig from '@/utils/useStaticsConfig'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: {},
  name: 'SupplierSalePlatform',
  data() {
    return {
      showImage: false,
      showUrl: '',
      showSearch: true,
      form: {},
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        time: [],
      },
    }
  },
  async created() {
    this.queryParams.time = this.setStatisticsDefautTime('day')

    this.getList()
  },

  methods: {
    mouseenterleave(url, flage) {
      this.showImage = flage
      this.showUrl = url === 'img' ? this.showUrl : url
    },
    drawCharts() {
      function draw(id, item) {
        const xData = item?.salesVolumeList.map((i) => i.createTime?.split(' ')[0])
        const yData = item?.salesVolumeList.map((item) => item.salePrice)
        const { tooltip, xAxis, yAxis, grid, series } = useStaticsConfig(xData, yData)
        const option = { tooltip, xAxis, yAxis, grid, series }
        const chartDom = document.getElementById('main' + id)

        let myChart = echarts.getInstanceByDom(chartDom)

        if (myChart == null) {
          myChart = echarts.init(chartDom)
        }
        myChart.setOption(option)
      }

      for (const item of this.tableData) {
        draw(item.skuId, item)
      }
    },
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true
      getSalesVolumeListByPlatformDistributor(data).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
        this.$nextTick(() => {
          this.drawCharts()
        })
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
.goods {
  &-img {
    &-box {
      position: relative;
    }

    &-mini {
      height: 50px;
      border-radius: 3px;

      &:hover {
        & + .goods-img-big {
          display: block;
        }
      }
    }

    &-big {
      // display: none;
      position: absolute;
      z-index: 100;
      top: -180px;
      left: 0;
      transform: translate(0, 70px);
      width: 200px;
      height: 200px;
      border-radius: 3px;
    }
  }
}

.bigImg {
  border-radius: 3px;
  z-index: 10;
  position: fixed;
  width: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
